<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        span{
            border:1px solid transparent;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div :style="{color:'red'}">这是div</div>
        <p  :style="{color:'red'}">这是p</p>
        <span  :style="{color:'red'}">这是span</span> -->


        <button @click="color='blue'">changeColor:{{color}}</button>
        <button @click="show=!show">changeShow</button>
        <br>

        <!-- v-color="color"  -->
        <!-- v-color:bg="color"  -->
        <!-- v-color:text="color"  -->
        <!-- v-color:border="color"  -->

        <!-- <div v-color:text.a.b="color" v-if="show">这是div</div>
        <p v-color:bg="color">这是p</p>
        <span v-color:border="color" >这是span</span> -->
        <com-a v-color:text.a.b="color"></com-a>
    </div>
</body>
<script>
    // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 格式
    // v-指令名 = "指令值"     eg: v-if  v-html
    // v-指令名:参数 = "指令值"     eg: v-bind:class   v-on:click
    // v-指令名:参数.修饰符.修饰符  = "指令值"   eg: v-on:click.stop   v-model.lazy

    // 自定义指令     
    //     通过自定义指令,当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM  => 指令可以服用


    Vue.component("com-a",{
        template:`<div>这是组件内的div</div>`,
    })


    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            show:true,
        },
        directives:{
            color:function(el,binding){ 
                console.log("inserted");
                console.log("el",el);
                console.log("binding",binding);

                let {arg='text', value} = binding;
                switch(arg){
                    case "text": 
                        el.style.color = value;
                        break;
                    case "bg": 
                        el.style.backgroundColor = value;
                        break;
                    case "border": 
                        el.style.borderColor = value;
                        break;
                    default:
                        el.style.color = value;
                        break;
                }

             }
        }

    })

</script>
</html>